<!-- 测试新的媒体日历组件 -->
<template>
    <div>
     
        <AgGridVue
      style="width: 100%; height: 600px"
      class="ag-theme-alpine"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :rowHeight="35"
      :headerHeight="40"
      :enableColumnVirtualisation="true"
      :suppressHorizontalScroll="false"
      @body-scroll="handleHorizontalScroll"
      ref="gridRef"
    ></AgGridVue>
    </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
export default{
    components: {
        AgGridVue
  },
    data(){
        return{
            columnDefs: [
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20},
        {name: '柳叶', gender: '女', age: 25},
        {name: '姜宇', gender: '男', age: 18}
      ]
        }
    }
}

</script>

<style>
.table{
  width: 600px;
  height: 200px;
}
</style>